<template>
  <el-cascader
    :value="select"
    :options="options"
    :props="cascadeprops"
    clearable
    style="width: 100%"
    :disabled="disabled"
    @change="selectChange"
  ></el-cascader>
</template>

<script>
  import { ApprovalTodoType } from '@/data/approval'

  export default {
    name: 'ApprovalTodoTypeSelect',
    props: {
      select: {
        type: Array,
        default: function () {
          return []
        },
      },
      disabled: {
        type: Boolean,
        default: function () {
          return false
        },
      },
    },
    data() {
      return {
        options: [],
        cascadeprops: {
          multiple: true,
          value: 'id',
          label: 'displayName',
          checkStrictly: true,
        },
      }
    },
    created() {
      for (let approvalTodoTypeKey in ApprovalTodoType) {
        this.options.push({
          id: approvalTodoTypeKey,
          displayName: ApprovalTodoType[approvalTodoTypeKey],
        })
      }
    },
    methods: {
      selectChange(newValue) {
        this.$emit('update:select', newValue)
      },
    },
  }
</script>
